<template>
	<div class="classesList">
		<div class="list-header" :class="isFixed?'isFixed':''" :style="topic_nav_style">
			<span class="classesTitle">我创建的班级</span>
			<el-button type="primary" size="medium" icon="el-icon-plus" @click="createClasses()" class="createClasses">创建班级</el-button>
			<div class="enterClasses">
				<el-input v-model="classesKeyword" size="small" placeholder="请输入班级编号或者班级名称" prefix-icon="el-icon-search"></el-input>
				<el-button type="primary" size="small" @click="getClasses(classesKeyword)">查询</el-button>
			</div>
		</div>
		<div class="class-list" v-loading="loading">
			<h4 v-if="classesList.length == 0">暂无班级</h4>
			<div class="class-box" v-for="(item,index) in classesList" :key="index">
				<div class="title">
					<div class="classNo">C{{item.classesId}}</div>
					<div class="className">{{item.classesName}}</div>
				</div>
				<div class="info">
					<div class="info-row">
						<div class="info-item">创建时间 : {{item.createDate}}</div>
						<div class="info-item">班级人数 : {{item.peopleNum}} 人</div>
					</div>
					<div class="info-row">
						<div class="info-item">加入限制 : {{item.joinWay | joinTayType}}</div>
						<div class="info-item creator">创建者 : {{item.creatorName}}</div>
					</div>
					<div class="info-item">班级简介 : <p>{{item.introduction}}</p>
					</div>
				</div>
				<div class="title-but">
					<el-button size="medium" type="primary" @click="openPaper(item.classesId,item.classesName)">进入班级</el-button>
					<el-button size="medium" type="info" @click="editClasses(item)" plain>设置</el-button>
					<el-button size="medium" type="danger" plain @click="outClasses(item.classesId)"> 删除班级 </el-button>
				</div>
			</div>
		</div>
		<div class="page">
			<el-pagination background layout="total, prev, pager, next,jumper" @current-change="currentChange" :total="total"
			 :page-size="pageSize" />
		</div>
		<!-- 创建班级对话框 -->
		<CreateClasses ref="createClasses" @success="getClasses()" />
		<!-- 修改班级对话框 -->
		<EditClasses ref="EditClasses" @success="getClasses()" />
	</div>
</template>
<script>
	import axios from "@/utils/axiosutils.js"
	import CreateClasses from './CreateClasses'
	import EditClasses from './EditClasses'
	export default {
		name: "ClassesList",
		components: {
			CreateClasses,
			EditClasses
		},
		data() {
			return {
				// 班级列表
				classesList: [],
				// 查询班级列表keyword
				classesKeyword: "",
				//侧导航栏是否悬浮
				isFixed: false,
				topic_nav_style: "top:0px",
				//分页
				currentPage: 1,
				pageSize: 4,
				total: null,
				loading: false,
			};
		},
		created() {
			this.getClasses();
		},
		mounted() {
		},
		methods: {
			//获取用户的班级列表
			getClasses() {
				this.loading = true
				setTimeout(() => {
					axios.get("classes/queryClassesList", resp => {
						this.classesList = resp.obj.content;
						this.total = resp.obj.total
						this.loading = false
					}, {
						pageSize: this.pageSize,
						currentPage: this.currentPage,
						keyword: this.classesKeyword
					})
				}, 500);
			},
			//进入班级空间
			openPaper(id, title) {
				this.$router.push({name:'课程详情',query: {id:id,title:title}}) // 只能用 name
				// this.$emit("openPaper", id, title);
			},
			// 创建班级
			createClasses() {
				this.$refs.createClasses.dialog = true
			},
			// 修改班级
			editClasses(val) {
				this.$refs.EditClasses.dialog = true
        //向自组件传值
				this.$refs.EditClasses.editClassesData = JSON.parse(JSON.stringify(val))
			},
			//退出班级
			outClasses(c_id) {
				this.$confirm(" 这将会删除所有与班级有关的信息", "是否确定删除班级?", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "info",
				}).then(() => {

					axios.post("classes/deleteClasses",resp=>{
            this.$message.success('删除班级成功')
            this.getClasses();
          },{
            id: c_id
          })


				}).catch(() => {});
			},
			//切换分页时触发
			currentChange(val) {
				this.currentPage = val
				this.getClasses()
			}
		},
	};
</script>
<style lang="less" scoped>
	.classesList {
		position: relative;
		padding: 12px 32px 24px 32px;

		.list-header {
			position: relative;
			background: #fafafa;
			padding: 6px 24px;
			border-radius: 4px;
			height: 60px;
			box-sizing: border-box;
			box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%), 0 0 6px 0 rgb(0 0 0 / 4%);

			span.classesTitle {
				display: inline-block;
				margin-right: 30px;
				font-size: 16px;
				line-height: 48px;
			}

			.createClasses {
				background: #4788cc;
				color: #fff;
				border-color: #f6f6f6;
			}

			.enterClasses {
				position: absolute;
				right: 24px;
				top: 14px;
				width: 400px;
				height: 40px;
			}

			.enterClasses .el-input {
				width: 320px;
				margin-right: 20px;
			}

			.enterClasses .el-button {
				background: #4788cc;
				border-color: #4788cc;
				transition: 1s;
			}
		}

		.list-header.isFixed {
			position: absolute;
			top: 10px;
			left: 32px;
			right: 32px;
			z-index: 999;
		}

		.class-list {
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;

			h4 {
				width: 100%;
				text-align: center;
				color: #666;
			}
		}

		.class-box {
			position: relative;
			width: 48%;
			min-width: 550px;
			background: #fafafa;
			border-radius: 6px;
			padding: 0 12px;
			margin: 20px 1% 0 1%;
			box-sizing: border-box;
			box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);

			.title {
				position: relative;
				display: flex;
				align-items: center;
				padding: 12px 0px;
				font-size: 16px;
			}

			.title .classNo {
				position: relative;
				top: 1px;
				margin: 0 24px
			}

			.title .className {
				min-width: 100px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.title-but {
				position: absolute;
				right: 24px;
				top: 70px;
				width: 120px;
				display: flex;
				justify-content: center;
				align-content: space-around;
				flex-wrap: wrap;
			}

			.title-but .el-button {
				width: 120px;
				margin-bottom: 12px;
			}

			.el-button+.el-button {
				margin-left: 0;
			}

			.info {
				border-top: 1px solid #e4e4e4;
				padding: 12px 0;
				color: #666;
			}

			.info-row {
				display: flex;
				position: relative;
			}

			.info-item {
				padding: 10px 10px;
				margin-right: 12px;
				font-size: 14px;

				p {
					text-indent: 2em;
					margin-top: 10px;
				}
			}

			.info-item.creator {
				position: absolute;
				left: 258px;
			}

			.class-button {
				position: absolute;
				bottom: 0;
				right: 20px;
				padding: 10px 10px;
			}
		}

		.el-dialog__body {
			padding: 30px 50px;
		}
	}
	
	.el-main {
		padding: 0;
	}
</style>